<template>
    <base-breadcrumb>
        <searchData :search-data="searchArr" @search="search"/>
        
        <a-card>
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :request="loadData"
            :isShowTotal="false"
            :pageKeys="['pageNum', 'pageSize', 'total']"
            :statisticsConfig="{use: true, temp: statisticsTemp}"
          >
            
            <template slot="prefix">
              <a-button @click="handleDetial('add')" type="primary" v-btnPermission="'tm_026_add_01'">新增</a-button>
            </template>
            
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            
            <template slot="auditStatus" slot-scope="text, record">
              <!-- 审核状态(0：未提交，1：审核中，3：审核通过，5：审核不通过) -->
              <list-status
                :color="['yellow', 'blue', 'grey', 'green', 'grey', 'red'][text]"
                :text="record.auditStatusName"
              />
            </template>
            
            <!-- 操作 -->
            <template slot="operation" slot-scope="text, record">
              <MoreButton>
              <a @click="handleDetial('view', record)" v-btnPermission="'tm_026_loo_04'">查看</a>
              <span v-btnPermission="'tm_026_edi_02'" v-if="record.auditStatus == 0 || record.auditStatus == 5">
                <a-divider type="vertical" />
                <a @click="handleDetial('edit', record)">编辑</a>
              </span>
              <span v-btnPermission="'tm_026_del_03'" v-if="record.auditStatus == 0 || record.auditStatus == 5">
                <a-divider type="vertical" />
                <a @click="handleAction('del', '删除', record)">删除</a>
              </span>
              <span v-btnPermission="'tm_026_loo_04'" v-if="record.auditStatus != 0">
                <a-divider type="vertical" />
                <approval-button :id="record.id" text="审批信息"></approval-button>
              </span>
              </MoreButton>
            </template>
          </list-table>
        </a-card>
    </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import listStatus from '@/components/list_status/list_status.vue'
import { getList, getCount, deleteList } from '@/api/technical/dataManagePlan'
const columns = [
    {
        title: '序号',
        width: '65px',
        scopedSlots: { customRender: 'serial' },
    },
    {
        title: '分公司',
        dataIndex: 'branchCompanyName',
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        ellipsis: true,
    },
    {
        title: '填报人',
        dataIndex: 'updateUserName',
    },
    {
        title: '填报时间',
        dataIndex: 'updateTime',
    },
    {
        title: '状态',
        dataIndex: 'auditStatus',
        scopedSlots: { customRender: 'auditStatus' },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        fixed: 'right',
        width: '230px',
        scopedSlots: { customRender: 'operation' },
    },
]
export default {
    name:'a'+Date.now(),
    components: {
        SelectSubCompany,
        SelectProject
    },
    data() {
        this.columns = columns
        return {
            loadData: (parameter) => {
              let that = this
              let param = { ...this.queryParam }
              if (param.updateStartTime) param.updateStartTime = param.updateStartTime + ' 00:00:00'
              if (param.updateEndTime) param.updateEndTime = param.updateEndTime + ' 23:59:59'
              const requestParameters = Object.assign({}, parameter, { param: param })
              getCount(param)
              .then((res) => {
                  this.loading.isTable = false
                  this.from = res.data
              })
              .catch(() => {
                  this.loading.isTable = false
              })
              return getList(requestParameters).then((res) => {
                if (res.code == 0) {
                  return { code: 200, ...res.data, data: res.data.list }
                }
                return { code: 200, data: [] }
              })
            },
            loading: {
                isTable: false,
            },
            queryParam: {},
            from: {
              buildIng: '0',
              pass: '0',
              approvalIng: '0',
              fail: '0',
              uncommitted: '0'
            },
            statisticsTemp: () => {
              // 在建项目数量：  20 个   ，审核通过计划：12 个  ，审核中计划：6个  ，未审核通过计划  2个  ，未提交计划  1个
                return (
                    <span>
                      <span>项目数量：<a> { this.from.buildIng } </a><span style="margin: 0 5px">个</span></span>
                      <span>审核通过计划：<a> { this.from.pass }</a><span style="margin: 0 5px">个</span></span>
                      <span>审核中计划：<a> { this.from.approvalIng } </a><span style="margin: 0 5px">个</span></span>
                      <span>未审核通过计划：<a> { this.from.fail } </a><span style="margin: 0 5px">个</span></span>
                      <span>未提交计划：<a> { this.from.uncommitted } </a><span style="margin: 0 5px">个</span></span>
                    </span>
                )
            },
        }
    },
    computed: {
      searchArr() {
        return [
          // 搜索框
          {
            name: '所属单位',
            valueKey: 'searchQuery',
            type: OrgTreeSelect,
          },
          // {
          //   name: '分公司',
          //   valueKey: 'branchCompanyId',
          //   type: SelectSubCompany
          // },
          // {
          //   name: '项目名称',
          //   keyValue: 'branchCompanyId',
          //   valueKey: 'projectId',
          //   type: SelectProject
          // },
          {
              name: '填报人',
              type: 'input',
              value: 'updateUserName'
          },
          {
              name: '填报时间',
              type: 'dateRange',
              value: 'activityDate',
              attr: {
                  rangeFormat: ['updateStartTime', 'updateEndTime']
              }
          },
        ]
      }
    },
    created() {
    },
    methods: {
        search(values) {
          this.queryParam = { ...values }
          this.$refs.table.refresh()
        },
        handleAction(type, action, e) {
          let that = this
          that.$confirm({
              title: '温馨提示',
              content: `确定是否${action}？`,
              okText: '确认',
              okType: 'danger',
              cancelText: '取消',
              onOk() {
                return deleteList({id: e.id})
                  .then((res) => {
                      that.$message.success(`${action}成功！`)
                      that.$refs.table.refresh()
                  })
                  .catch((res) => {
                      that.$message.warning(`${action}失败！`)
                  })
              },
          })
        },
        handleDetial(type, record) {
          let query = { type }
          if (type !== 'add') {
            query.id = record.id
          }
          this.$router.push({
              path: '/technical/dataManage/plan/edit',
              query,
          })
        },
    },
}
</script>

<style lang="less">
.not-submit {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: red;
    }
}
.submitted {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: green;
    }
}
</style>
